import React, { useEffect, useState, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import axios from "axios";
import Index from './Pages/Index';
import Video from './Pages/Video';
import WorkPlace from './Pages/WorkPlace';
import loadable from 'loadable-components';
// https://blog.csdn.net/datouniao1/article/details/121073845
// https://www.npmjs.com/package/loadable-components
import "./index.css"

// 快速导入工具函数
// const lazyLoad = (moduleName) => {
//     const Module = lazy(() => import(`./Pages/${moduleName}`));
//     console.log(Module);
//     return <Module />;
// };


const AppRouter = () => {
    // let routeConfig = [
    //     { path: '/', title: '博客首页', exact: true, component: Index },
    //     { path: '/video/', title: '视频教程', exact: false, component: Video },
    //     { path: '/workPlace/', title: '职场技能', exact: false, component: WorkPlace }
    // ];

    const [routeConfig, setRouteConfig] = useState([]);

    useEffect(() => {
        axios.get('https://www.fastmock.site/mock/6ff52d018330d0650bed38718fde63b1/redux/routerList').then(res => {
            const { data } = res.data;
            setRouteConfig(data);
            console.log("123");
            console.log(data);
        });
    }, []);

    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        {
                            routeConfig.map((item, index) => {
                                return (
                                    <li key={index}><Link to={item.path}>{item.title}</Link> </li>
                                )
                            })
                        }
                    </ul>
                </div>

                <div className="rightMain">
                    <Routes>
                        {
                            routeConfig.map((item, index) => {
                                return (
                                    <Route key={index} exact={item.exact} path={`${item.path}*`} element={lazyLoad(item.component)} />
                                )
                            })
                        }
                    </Routes>
                </div>
            </div>
        </Router>
    )
}

export default AppRouter;